<template>
    <div class="carousel-wrap" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <div v-if="showArrow" class="arrow left-arrow" :class="{'arrow-hover': isHover}" @click="handleButtonClick('left')"></div>
        <div v-if="showArrow" class="arrow right-arrow" :class="{'arrow-hover': isHover}" @click="handleButtonClick('right')"></div>
        <div v-for="(item, index) in items" :key="index" class="inner">
            <img :src="item.url" :style="{
                msTransform: `translateX(${ item.translateX }px))`,
                webkitTransform: `translateX(${ item.translateX }px)`,
                transform: `translateX(${ item.translateX }px)`
            }" :class="{
                'animate': item.isAnimationg,
                'active': item.isActive
            }">
        </div>
        <div class="indicator">
            <li v-for="(item, index) in items" :key="index">
                <div class="indicator-botton" :class="{'selected': item.isActive}"></div>
            </li>
        </div>
    </div>
</template>

<script>
export default {
    name: "carousel",
    props: {
        data: Array,
        autoPlay: {
            type: Boolean,
            default: true
        },
        showArrow: {
            type: Boolean,
            default: true
        },
        showIndicator: {
            type: Boolean,
            default: true
        },
        interval: {
            type: Number,
            default: 3000
        }
    },
    data() {
        return {
            items: [],
            activeIndex: 0,
            timer: null,
            width: 0,
            isHover: false
        }
    },
    watch: {
        activeIndex(val, oldVal) {
            var thisComponent = this;
            $.each(thisComponent.items ||[], function(i, vali) {
                // 考虑向左转还是向右转，保证下一张图片偏移比当前图片大一个width长度，上一张图片偏移比当前图片小一个width长度
                if (i == val) {
                    vali.translateX = 0;
                    vali.isActive = true;
                    vali.isAnimationg = true;
                } else if (i == oldVal) {
                    vali.translateX = thisComponent.width * (((val > oldVal && (val - oldVal) == 1) || ((val < oldVal) && (oldVal - val) == (thisComponent.items.length - 1))) ? -1 : 1);
                    vali.isAnimationg = true;
                    vali.isActive = false;
                } else {
                    vali.translateX = thisComponent.width * (((val > oldVal && (val - oldVal) == 1) || ((val < oldVal) && (oldVal - val) == (thisComponent.items.length - 1))) ? 1 : -1);
                    vali.isAnimationg = false;
                    vali.isActive = false;
                }
            })
        }
    },
    methods: {
        handleMouseEnter() {
            this.isHover = true;
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
        handleMouseLeave() {
            this.isHover = false;
            this.timer = setInterval(this.nextOne, this.interval);
        },
        preOne() {
            this.activeIndex = (this.activeIndex > 0) ? this.activeIndex - 1 : this.items.length - 1;
        },
        nextOne() {
            this.activeIndex = (this.activeIndex < this.items.length - 1) ? this.activeIndex + 1 : 0;
        }
    },
    created() {
        // 按钮需要进行节流操作，防止频繁点击出现空白
        var thisComponent = this;
        thisComponent.handleButtonClick = (function(delay) {
            var _timer;
            var _startTime = 0;

            function wrapper(direction) {

                var elapsed = Date.parse(new Date()) - _startTime;

                function exec() {
                    _startTime = Date.parse(new Date());
                    if(direction == "left") {
                        thisComponent.preOne();
                    } else {
                        thisComponent.nextOne();
                    }
                }

                if(_timer) {
                    clearTimeout(_timer);
                }
                // 当经过时间大于延时时间，强制执行函数
                if (elapsed > delay) {
                    exec();
                } else {
                    _timer = setTimeout(function() {
                        exec();
                    }, delay)
                }
            }
            return wrapper;
        })(400)
    },
    mounted() {
        var thisComponent = this;
        thisComponent.$nextTick(function() {
            thisComponent.width = $(".carousel-wrap").width();
            $.each(thisComponent.data ||[], function(i, vali) {
                thisComponent.items.push({
                    url: vali,
                    translateX: (i == 0) ? 0 : (i < thisComponent.data.length - 1) ? thisComponent.width : -thisComponent.width,
                    isActive: (i == 0) ? true : false,
                    isAnimationg: false
                })
            })
            if (thisComponent.autoPlay) {
                thisComponent.timer = setInterval(thisComponent.nextOne, thisComponent.interval);
            }
        })
    }
}
</script>

<style lang="sass">
@import "../style/carousel";
</style>
